<template>
	 
		<view v-if="house" class="house-item"  @click="onClick" >
			<view class="item-face">
				<navigator :url="show_url">
					<view v-if="house.istop>0" class="topicon">
						<text class="istop">{{ topnum+1 }}</text>
					</view>
					<!-- 显示前三条top -->
					
				<view v-if="house.video" class="video-icon icon kb-icon-play"></view>
				<up-image :src="house.thumb" width="130"
				 height="100" radius="8"  :fade="false" >
					<template #error>
						 <up-image :src="ee.wxapp.photoface" width="130"
						 height="100" radius="8" ></up-image>						 
					</template> 
				</up-image>
				</navigator>
				 <view class="hasview">
					<text> </text>
				 </view>
			</view>
			<view class="item-content">
				<view class="item-title">
					<navigator :url="show_url">
					<up-text lines="2" :bold="true" size="17" :text="house.title" :block="true"></up-text>
					</navigator>
				</view>

				<view class="lines">
					<view class="item-price">
						<navigator :url="show_url">
						<text class="total">{{house.item_price}}</text>
						<text class="per">{{house.item_per}}</text>
						</navigator>
					</view>
					<view class="item-desc">
						<text>{{house.item_address}}</text>
					</view>
				</view>
				
				 <view class="item-tags">	
					<view v-if="house.isjingpin ==1 " class="tag">
						<text class="tag-text tag-red">必看好房</text>
					</view>				  
					<view class="tag">
						<text class="tag-text">{{house.infolabel}}</text>
					</view>					 
					<view class="tag">
						<text class="tag-text">{{house.infotype}}</text>
					</view>					 
				 </view>
				 
			</view>
		</view>
	 
</template>

<script>
	export default {
		name: "kb-house-item",
		props: {
			house: {
				type: Object,
				validator: function(value) {
					// 返回true或false，表示value是否符合要求
					return value !== null && typeof value === 'object';
				}
			},
			renttype : {
				type:[String, Number],
				default: 0,
			},
			zhutype: {
				type:[String, Number],
				default: 0,
			},
			topnum: {
				type:[String, Number],
				default: 0,
			}
		},
		data() {
			return {
			   view_history_tips: '',
			};
		},
		computed: {
			//房源链接url
			show_url(){
				return '/pages/show/show?id='+ this.house?.id
			},
			 
			//显示最近浏览过 Tips
			history_tips: {
				get(){				
					var d = uni.getStorageSync('viewhistory') ||[]; 
					if (d && d.indexOf( this.house.id ) != -1)  
						this.view_history_tips = '最近浏览过该房源'
					else
						this.view_history_tips = '';
				},
				set(value){  
					var d = uni.getStorageSync('viewhistory') || [];
					if(d.length > 1000) d =[];
					if (d.indexOf( this.house.id ) == -1 ){
						d.push( this.house.id)
						uni.setStorageSync('viewhistory', d)
						this.view_history_tips = '最近浏览过该房源'
					}  
				}			 
					
			}
		},
		methods:{
			onClick (e){
				 this.history_tips = true;	
			}
		},

		watch: { 
			 history_tips(n,o){ //定义这里后可以运行history_tips 它的get 方法
				 
			 }
		},
		mounted() {
			 
		}
	}
</script>

<style lang="scss">
	/**/
	.item-face{
		position: relative;
		width: 130px; 
		min-height: 120px;
	} 
	.video-icon {
		width: 42rpx;
		 height: 42rpx;
		 position: absolute;
		 top: 70px;
		 left: 8px;
		 z-index: 2;
	}
	.topicon{
		position: absolute;
		top: 0px;
		left: 0;
		z-index: 2;
		border-top-left-radius: 10px;
		border-bottom-right-radius: 10px;
		background-color:#FC9244;
		height: 20px;
		width: 20px;
		text-align: center;
		color: #fff;
	}
	.house-item {
		display: flex;
		padding: 30rpx 0;
		
		background: #fff;
	}
 
	.hasview{
		font-size: 20rpx;
		color: #454545;
		padding-top: 13rpx;
	}

	.item-content {
		margin-left: 24rpx;
	}

	.item-title {
		font-weight: bold;
	}

	.item-price .total {
		color: #f80000;
		font-weight: bold;
		font-size: 16px;
	}

	.item-price .per {
		margin-left: 20rpx;
		color: #222;
		font-size: 12px;
	}

	.lines {
		display: flex;
		flex-direction: column;
		line-height: 40rpx;
		margin: 10rpx 0rpx;
	}

	.item-desc {
		color: #999;
		font-size: 28rpx;
	}

	.item-tags {
		display: flex;
	}

	.tag {
		margin-right: 10rpx;

		&-text {
			font-size: 20rpx;
			font-weight: bold;
			color: #91A3B6;
			display: inline-block;
			background-color: #eee;
			padding: 3rpx 7rpx;
			border-radius: 5rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;			 
			text-align: center;
		}
			
		.tag-red{
			background-color: #FC9244;
			color: #fff;
		}

	}
</style>